<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心页面预览</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .preview-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .preview-header {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .feature-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }
        
        .feature-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feature-desc {
            color: #666;
            line-height: 1.6;
        }
        
        .tech-stack {
            background: #e9ecef;
            padding: 20px;
            border-radius: 10px;
            margin-top: 30px;
        }
        
        .tech-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        
        .tech-tag {
            background: #667eea;
            color: white;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="preview-container">
        <div class="preview-header">
            <h1><i class="fas fa-user-circle"></i> 个人中心页面完成</h1>
            <p>负责人：钟嘉妮</p>
        </div>
        
        <div class="feature-list">
            <div class="feature-item">
                <div class="feature-title">
                    <i class="fas fa-user-edit"></i>
                    用户信息管理
                </div>
                <div class="feature-desc">
                    • 头像上传和预览<br>
                    • 用户名、邮箱编辑<br>
                    • 实时保存功能<br>
                    • 表单验证
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">
                    <i class="fas fa-trophy"></i>
                    等级系统
                </div>
                <div class="feature-desc">
                    • 动态等级徽章<br>
                    • 经验值进度条<br>
                    • 多级别称号<br>
                    • 视觉效果动画
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">
                    <i class="fas fa-chart-bar"></i>
                    游戏统计
                </div>
                <div class="feature-desc">
                    • 总游戏场次<br>
                    • 胜率统计<br>
                    • 排名显示<br>
                    • 最佳连胜记录
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">
                    <i class="fas fa-history"></i>
                    游戏历史
                </div>
                <div class="feature-desc">
                    • 最近游戏记录<br>
                    • 分页加载<br>
                    • 结果状态显示<br>
                    • 时间格式化
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">
                    <i class="fas fa-key"></i>
                    安全设置
                </div>
                <div class="feature-desc">
                    • 密码修改功能<br>
                    • 安全验证<br>
                    • 表单验证<br>
                    • 错误处理
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">
                    <i class="fas fa-bell"></i>
                    通知系统
                </div>
                <div class="feature-desc">
                    • 成功/错误提示<br>
                    • 动画效果<br>
                    • 自动消失<br>
                    • 响应式设计
                </div>
            </div>
        </div>
        
        <div class="tech-stack">
            <h3><i class="fas fa-code"></i> 技术栈</h3>
            <div class="tech-list">
                <span class="tech-tag">Vue 3</span>
                <span class="tech-tag">Composition API</span>
                <span class="tech-tag">Pinia</span>
                <span class="tech-tag">Vue Router</span>
                <span class="tech-tag">Axios</span>
                <span class="tech-tag">CSS Grid</span>
                <span class="tech-tag">响应式设计</span>
                <span class="tech-tag">组件化开发</span>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 30px; color: #666;">
            <p><i class="fas fa-check-circle" style="color: #28a745;"></i> 个人中心页面开发完成！</p>
            <p>包含完整的用户信息管理、游戏统计、历史记录和安全设置功能。</p>
        </div>
    </div>
</body>
</html>
